<template>
  <div class="form-section">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.with_join', '关联配置')"
          :tooltipContent="
            $t('menu.dev.action.tip.with_join', '配置多个表的关联')
          "
          prop="config.with_join"
        >
          <ra-relation-config
            v-if="dbConnections && tableFields"
            :tableFields="tableFields"
            :dbConnections="dbConnections"
            v-model="formData.config.with_join"
          ></ra-relation-config>
        </el-form-item-plus>
      </el-col>
      <el-col :span="24">
        <el-form-item-plus
          :label="$t('menu.dev.action.field.sql', '原生查询')"
          :tooltipContent="$t('menu.dev.action.tip.sql', '原生SQL查询语句')"
          prop="config.sql"
        >
          <el-input type="textarea" :rows="18" v-model="formData.config.sql" />
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

defineProps({
  formData: {
    type: Object,
    required: true,
  },
  tableFields: {
    type: Array,
    default: () => [],
  },
  dbConnections: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="scss" scoped></style>
